<template>
	<view style="width: 95%;" class="content">
		<view class="header">
			<view class="userinfo" v-if="USER_INFO.userStatus" @tap="goUserInfo">
				<view class="face"><image @error="imageError" :src="USER_INFO.userHeadimg"></image></view>
				<view class="info" style="align-items: center;">
					<view class="username uni-ellipsis">{{ USER_INFO.userNickname }}</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;width: 750upx;" class="" v-else><button type="primary" @tap="goLogo">登录</button></view>
		</view>
		
		
		<view class="list">
			<view class="li" @tap="toPage('../baoxiuList/baoxiuList')">
				<view class="icon"><image src="../../static/HM-PersonalCenter/sever/point.png"></image></view>
				<view class="text">我的报修</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
		</view>
		
		<view class="list">
			<view class="li" @tap="toPage('../pwd/pwd')">
				<view class="icon"><image src="../../static/HM-PersonalCenter/sever/security.png"></image></view>
				<view class="text">修改密码</view>
				<image class="to" src="../../static/HM-PersonalCenter/to.png"></image>
			</view>
		</view>
		<view class="goOut" v-show="USER_INFO.userStatus"><button type="primary" @tap="goOut">退出</button></view>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
	computed: mapState(['URL', 'UPDATE', 'USER_INFO', 'TOKEN']),
	data() {
		return {
// 			severList: [
// 				[{ name: '我的报修', icon: 'point.png', url: '../baoxiuList/baoxiuList' }],
// 				[
// 					{ name: '修改密码', icon: 'security.png', url: '../pwd/pwd' }
// 					// 					{ name: '关于我们', icon: 'kefu.png', url: '../about/about' },
// 					// 					{ name: '问题反馈', icon: 'kefu.png', url: '../feedback/feedback' }
// 				]
// 			]
		};
	},
	onShow() {
		if (this.UPDATE) {
			this.TO_UPDATE(false);
			this.init();
		}
	},
	onLoad() {
		this.init();
	},
	methods: {
		...mapMutations(['SIGN_OUT', 'TO_UPDATE', 'GET_USER_INFO', 'GET_TOKEN']),
		init() {
			this.GET_USER_INFO();
			this.GET_TOKEN();
		},
		//图片加载失败
		imageError: function(e) {
			this.USER_INFO.userHeadimg = '../../static/HM-PersonalCenter/face.jpeg';
		},
		//用户点击列表项
		toPage(pagesName) {
			if (this.USER_INFO) {
				uni.navigateTo({
					url: pagesName
				});
			} else {
				uni.showModal({
					content: '请先登录',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: '../login/login'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		goUserInfo() {
			uni.navigateTo({
				url: '../userInfo/userInfo'
			});
		},
		goOut() {
			console.log(this.URL);
			uni.showLoading({
				title: '正在退出..'
			});
			uni.request({
				url: this.URL + 'logout',
				header: {
					token: this.TOKEN
				},
				method: 'POST',
				success: res => {
					console.log(res);
					this.SIGN_OUT();
					uni.hideLoading();
				}
			});
		},
		goLogo() {
			uni.navigateTo({
				url: '../login/login'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.header {
	&.status {
		padding-top: var(--status-bar-height);
	}
	background-color: rgba(0, 122, 255, 0.66);
	width: 92%;
	height: 30vw;
	padding: 0 4%;
	display: flex;
	align-items: center;
	.userinfo {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.face {
			flex-shrink: 0;
			width: 15vw;
			height: 15vw;
			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
			}
		}
		.info {
			display: flex;
			flex-flow: wrap;
			justify-content: center;
			.username {
				width: 220upx;
				text-align: center;
				color: #fff;
				font-size: 40upx;
			}
			.integral {
				display: flex;
				align-items: center;
				padding: 0 20upx;
				height: 40upx;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.1);
				border-radius: 20upx;
				font-size: 24upx;
			}
		}
	}
	.setting {
		flex-shrink: 0;
		width: 6vw;
		height: 6vw;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.hover {
	background-color: #eee;
}
.orders {
	background-color: #ff6364;
	width: 92%;
	height: 11vw;
	padding: 0 4%;
	margin-bottom: calc(11vw + 40upx);
	display: flex;
	align-items: flex-start;
	border-radius: 0 0 100% 100%;
	.box {
		width: 98%;
		padding: 0 1%;
		height: 22vw;
		background-color: #fefefe;
		border-radius: 24upx;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		margin-bottom: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.label {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: wrap;
			width: 100%;
			height: 16vw;
			color: #666666;
			font-size: 26upx;
			.icon {
				position: relative;
				width: 7vw;
				height: 7vw;
				margin: 0 1vw;
				.badge {
					position: absolute;
					width: 4vw;
					height: 4vw;
					background-color: #ec6d2c;
					top: -1vw;
					right: -1vw;
					border-radius: 100%;
					font-size: 20upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 10;
				}
				image {
					width: 7vw;
					height: 7vw;
					z-index: 9;
				}
			}
		}
	}
}
.list {
	width: 100%;
	border-bottom: solid 26upx #f1f1f1;
	background: #fff;
	.li {
		width: 92%;
		height: 100upx;
		padding: 0 4%;
		border-bottom: solid 1upx #e7e7e7;
		display: flex;
		align-items: center;
		&.noborder {
			border-bottom: 0;
		}
		.icon {
			flex-shrink: 0;
			width: 50upx;
			height: 50upx;
			image {
				width: 50upx;
				height: 50upx;
			}
		}
		.text {
			padding-left: 20upx;
			width: 100%;
			color: #666;
		}
		.to {
			flex-shrink: 0;
			width: 40upx;
			height: 40upx;
		}
	}
}
.goOut {
	margin: 20px;
}
</style>
